<template>
  <div>
    <el-card slot="header">
      <div class="category-header" style="margin-top: -7px">
        <span>销售额类别占比</span>
        <el-radio-group v-model="radio1">
          <el-radio-button label="全部渠道"></el-radio-button>
          <el-radio-button label="线上"></el-radio-button>
          <el-radio-button label="全部"></el-radio-button>
        </el-radio-group>
      </div>
      <div>
        <!-- 容器 -->
        <div class="charts" ref="charts"></div>
      </div>
    </el-card>
  </div>
</template>
  
<script>
// 引入
import * as echarts from "echarts";
export default {
  name: "Category",
  data() {
    return {
      radio1: "全部渠道",
    };
  },
  mounted() {
    //初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    //配置数据
    lineCharts.setOption({
      legend: {
        top: "bottom",
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [50, 140],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: [
            { value: 40, name: "东" },
            { value: 38, name: "南" },
            { value: 32, name: "西" },
            { value: 30, name: "北" },
            { value: 28, name: "上" },
            { value: 26, name: "下" },
            { value: 22, name: "左" },
            { value: 18, name: "右" },
          ],
        },
      ],
    });
  },
};
</script>
  
<style scoped>
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.category-header span {
  font-size: 18px;
}
.charts {
  width: 100%;
  height: 343px;
}
</style>